<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>

        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            body {
                height: 100vh;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: rgb(4, 4, 19);
            }
            .night {
                position: relative;
                width: 300px;
                height: 100px;
                color: rgb(18, 190, 243);
                letter-spacing: 12px;
                font-size: 50px;
                line-height: 100px;
                text-align: center;
                /* background-color: rgb(31, 49, 133); */
                background-image: linear-gradient(90deg, rgb(40, 62, 161) 50%, rgb(31, 49, 133) 50%);
                text-transform: uppercase;
                user-select: none;
                text-decoration: none;
                overflow: hidden;
                box-shadow: inset 0 0 10px rgb(14, 20, 105), 0 0 5px rgb(9, 208, 235);
                transition: all 0.5s;
            }
            .night:hover {
                text-shadow: 0 0 5px rgb(18, 190, 243), 0 0 8px rgb(18, 190, 243), 0 0 10px rgb(18, 190, 243);
                background-image: linear-gradient(90deg, rgb(25, 38, 99) 50%, rgb(13, 22, 58) 50%);
                box-shadow: inset 0 0 10px rgb(14, 20, 105), 0 0 5px rgb(9, 208, 235), 0 0 10px rgb(9, 208, 235);
            }

            .night span {
                position: absolute;
            }
            /* 设置按钮上方那条运动蓝线样式 */
            .night span:nth-child(1) {
                top: 0;
                left: 0;
                width: 100%;
                height: 2px;
                background-image: linear-gradient(to right, transparent, rgb(0, 153, 255));
                animation: move1 2s linear infinite;
            }
            @keyframes move1 {
                0% {
                    transform: translateX(-100%);
                }
                100% {
                    transform: translateX(100%);
                }
            }
            .night span:nth-child(2) {
                top: 0;
                right: 0;
                width: 2px;
                height: 100%;
                transform: translateY(-100%);
                background-image: linear-gradient(to bottom, transparent, rgb(0, 153, 255));
                animation: move2 2s linear infinite;
                animation-delay: 1s;
            }
            @keyframes move2 {
                100% {
                    transform: translateY(100%);
                }
            }
            .night span:nth-child(3) {
                left: 0;
                bottom: 0;
                width: 100%;
                height: 2px;
                background-image: linear-gradient(to left, transparent, rgb(0, 153, 255));
                animation: move3 2s linear infinite;
            }
            @keyframes move3 {
                0% {
                    transform: translateX(100%);
                }
                100% {
                    transform: translateX(-100%);
                }
            }
            .night span:nth-child(4) {
                top: 0;
                left: 0;
                width: 2px;
                height: 100%;
                transform: translateY(100%);
                background-image: linear-gradient(to top, transparent, rgb(0, 153, 255));
                animation: move4 2s linear infinite;
                animation-delay: 1s;
            }
            @keyframes move4 {
                100% {
                    transform: translateY(-100%);
                }
            }
        </style>
    </head>
    <body>
        <!-- a标签是按钮，4个span就是按钮周围那四条行动的蓝边。 -->
        <a href="https://blog.csdn.net/luo1831251387?spm=1000.2115.3001.5343" class="night" target="blank">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            night
        </a>
    </body>
</html>
